<template>

    <div v-bind:style="{height: pageHeight}" style="background-color: black;display: flex">
        <div class="item" style="background-color: #224979">
            <div class="text">
                <span>我是学生</span>
            </div>
            <div class="content"></div>
        </div>
        <div class="item" style="background-color: #950000">
            <div class="text">
                <span>我是教师</span>
            </div>
            <div class="content"></div>
        </div>
        <div class="item" style="background-color: #205911">
            <div class="text">
                <span>我是管理员</span>
            </div>
            <div class="content"></div>
        </div>
        <div class="item">
            <div class="text">
                <span>我是课程顾问</span>
            </div>
            <div class="content"></div>
        </div>
    </div>

</template>

<script>
    'use strict';

    export default {
        name: "Login",
        props: {},
        data() {
            return {
                // 页面尺寸信息
                pageHeight: window.innerHeight + 'px',
                pageWidth: window.innerWidth + 'px',

            }
        },
        computed: {},
        methods: {},
        created() {
        },
        mounted() {

            window.onresize = () => {
                this.pageHeight = window.innerHeight + 'px';
                this.pageWidth = window.innerWidth + 'px';
            };

        }
    }
</script>

<style lang="scss" scoped>

    .item{
        /*display: inline-block;*/
        display: flex;
        width: 100px;
        height: 100%;
        background-color: #977d01;

        .text{
            cursor: pointer;
            display: flex;
            height: 100%;
            width: 100px;
            overflow: hidden;
            color: transparent;
            transition: color 0.5s linear;

            &:hover{
                color: #9b9b9b;
            }

            span{
                margin: 0 auto;
                text-align: center;
                display: block;
                font-size: 40px;
                /*font-family: "幼圆", serif;*/
                letter-spacing: 3rem;
                writing-mode: vertical-lr;
            }

        }

        /*.content{*/
            /*display: flex;*/
            /*width: 100px;*/
            /*height: 100%;*/
            /*background-color: #f8c301;*/
        /*}*/

    }

</style>
